<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级作用域ES5没闭包，有闭包</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>


    <script>
        // 1.变量作用域：变量在什么范围内是可用
        {
            var name = 'why';
            console.log(name);
        }
        console.log(name);

        // 2.没有块级作用域引起的问题:if的块级
        var func;
        if (true) {
            var name = 'why';

            func = function () {
                console.log(name);
            }
            // func()
        }
        name = "kobe";
        func();
        console.log(name);

        // 3.没有块级作用域引起的问题:for的块级

        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                var num = i+1;
                console.log('第' + num + '个按钮被点击');
            })
        }

        // 解决方案：闭包
        // 为什么闭包可以解决：因为函数是一个作用域
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            (function(i){
                btns[i].addEventListener('click', function () {
                    var num = i+1;
                    console.log('第' + num + '个按钮被点击');
                })
            })(i)
        }
        

        // ES6之前因为if for 都没有块级作用域的概念，我们都必须借助于function的作用域来解决应用外面变量的问题

        // ES6中 加入了let，let它是有 if 和for 的块级作用域

        // const btns = document.getElementsByTagName('button');
        // for (let i = 0; i < btns.length; i++) {
        //     btns[i].addEventListener('click', function () {
        //         var num = i+1;
        //         console.log('第' + num + '个按钮被点击');
        //     })
        // }

        // ES5 中的var 是没有块级作用域的（如：if for），而ES6中的let是有块级作用域的（如if for）

        const obj = {
            name = 'why',
            age = 18 ,
            height = 168
        }

        console.log(obj);
        obj.name = 'kobe';
        obj.age = 40;
        obj.height = 189;
    </script>
</body>

</html>